import React, { Component } from 'react';
import { Layout } from 'antd';
import './style/index.less';
import SiderCustom from './components/SiderCustom';
import HeaderCustom from './components/HeaderCustom';
import { receiveData, countData, countDataInit } from './action';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
const { Content, Footer } = Layout;

class App extends Component {
    state = {
        collapsed: false,
    };
    componentWillMount() {
        const { receiveData } = this.props;
        const user = JSON.parse(localStorage.getItem('user'));
        user && receiveData(user, 'auth');
        // receiveData({a: 213}, 'auth');
        // fetchData({funcName: 'admin', stateName: 'auth'});
        this.getClientWidth();
        window.onresize = () => {
            console.log('屏幕变化了');
            this.getClientWidth();
            // console.log(document.body.clientWidth);
        }
    }
    getClientWidth = () => {    // 获取当前浏览器宽度并设置responsive管理响应式
        const { receiveData } = this.props;
        const clientWidth = document.body.clientWidth;
        console.log(clientWidth);
        receiveData({isMobile: clientWidth <= 992}, 'responsive');
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };
    /**
     * author heshengjin
     * date 2017-10-10
     */
    countD = (data, category) => {
        const { countData } = this.props;
        countData(1,'counter');
    };
    /**
     * @author heshengjin
     * @date 2017-10-14
     * 直接在reduce里面初始化，对比COUNT_DATA在获取的时候初始化
     * 不要category
     * @type {string}
     */
    countDI = (data) => {
        const { countDataInit } = this.props;
        countDataInit(100);
    };
    render() {
        console.log(this.props.auth);
        console.log(this.props.responsive);
        const { auth, router, responsive, counter,counterinit } = this.props;

        /**
         * author heshengjin
         * date 2017-10-10
         */
        console.log("hsj-counter");
        console.log(counter);
        console.log("hsj-counter");

        /**
         * @author heshengjin
         * @date 2017-10-14
         * 直接在reduce里面初始化，对比COUNT_DATA在获取的时候初始化
         * 不要category
         * @type {string}
         */
        console.log("hsj-counterinit");
        console.log(counterinit);
        console.log("hsj-counterinit");

        return (
            <Layout className="ant-layout-has-sider">
                {!responsive.data.isMobile && <SiderCustom path={this.props.location.pathname} collapsed={this.state.collapsed} />}
              <Layout>
                <HeaderCustom toggle={this.toggle} user={auth.data || {}} router={router} path={this.props.location.pathname} />
                <Content style={{ margin: '0 16px', overflow: 'initial' }}>
                  {this.props.children}
                </Content>

                  {/*author heshengjin
                    date 2017-10-10
                  */}
                  <div style={{ margin: 'auto'}}>
                      counter=[{counter}]
                      <br/>
                      <button style={{ borderRadius:'5px', backgroundColor:'RGB(240,65,52)'}}
                              onClick={this.countD}>
                          点击测试计算counter
                      </button>
                  </div>

                  {/** @author heshengjin
                   * @date 2017-10-14
                   * 直接在reduce里面初始化，对比COUNT_DATA在获取的时候初始化
                   * 不要category
                   * @type {string}
                   */}
                  <div style={{ margin: 'auto'}}>
                      counterinit=[{counterinit}]
                      <br/>
                      <button style={{ borderRadius:'5px', backgroundColor:'RGB(245,70,57)'}}
                              onClick={this.countDI}>
                          点击测试计算counterinit
                      </button>
                  </div>

                <Footer style={{ textAlign: 'center' }}>
                  React-Admin ©2017 Created by 865470087@qq.com
                </Footer>
              </Layout>
                {
                    responsive.data.isMobile && (   // 手机端对滚动很慢的处理
                        <style>
                        {`
                            #root{
                                height: auto;
                            }
                        `}
                        </style>
                    )
                }
            </Layout>
        );
    }
}

const mapStateToProps = state => {
    const { auth = {data: {}}, responsive = {data: {}} } = state.httpData;
    /**
     * author heshengjin
     * date 2017-10-10
     */
    const { counter = 0 } = state.countData;
    /**
     * @author heshengjin
     * @date 2017-10-14
     * 直接在reduce里面初始化，对比COUNT_DATA在获取的时候初始化
     * 不要category
     * @type {string}
     */
    const { counterinit } = state.countDataInit;
    return {auth, responsive,counter,counterinit};
};
const mapDispatchToProps = dispatch => ({
    receiveData: bindActionCreators(receiveData, dispatch),
    /**
     * author heshengjin
     * date 2017-10-10
     */
    countData:bindActionCreators(countData, dispatch),
    /**
     * @author heshengjin
     * @date 2017-10-14
     * 直接在reduce里面初始化，对比COUNT_DATA在获取的时候初始化
     * 不要category
     * @type {string}
     */
    countDataInit:bindActionCreators(countDataInit, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(App);
